<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>Upload</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	
	<link rel="stylesheet" type="text/css" href="<%=basePath %>javascript/uploadify/uploadify.css"/>
	<script type="text/javascript" src="<%=basePath %>javascript/jquery-1.7.1.js"></script>
	<script type="text/javascript" src="<%=basePath %>javascript/uploadify/swfobject.js"></script>
	<script type="text/javascript" src="<%=basePath %>javascript/uploadify/jquery.uploadify.v2.0.3.js"></script> 
	<script type="text/javascript">
        $(document).ready(function() {
            $("#file").uploadify({
                /*注意前面需要书写path的代码*/
                // 如果需要修改按钮的图片：可以使用'buttonImg'配置进行替换 
                'uploader'       : '<%=basePath%>javascript/uploadify/uploadify.swf',
                'script'         : '<%=basePath%>upload.do',
                'cancelImg'      : '<%=basePath%>javascript/uploadify/cancel.png',
                'queueID'        : 'fileQueue', //和存放队列的DIV的id一致
                'fileDataName'   : 'file', //和以下input的name属性一致
                'auto'           : false, //是否自动开始
                'multi'          : true, //是否支持多文件上传
                'buttonText'     : '选取图片', //按钮上的文字
                'simUploadLimit' : 5, //一次同步上传的文件数目
                'sizeLimit'      : 20009871202, //设置单个文件大小限制
                'queueSizeLimit' : 3, //队列中同时存在的文件个数限制
                'fileDesc'       : '*.*', //如果配置了以下的'fileExt'属性，那么这个属性是必须的
                'fileExt'        : '*.*',//允许的格式  
		        onComplete: function (event, queueID, fileObj, response, data) {
		        	$('#imageinfo').append('<img src="<%=basePath%>'+response+'" width=80 height=80 style="margin:5px;">');
				},
				onError: function(event, queueID, fileObj) {
					alert("文件:" + fileObj.name + "上传失败");
				},
				onCancel: function(event, queueID, fileObj){
					alert("取消了" + fileObj.name);
				}
            });
        });
        
        function uploadifyUpload(){
			$('#file').uploadifyUpload();
		}
    </script>
  </head>
  
  <body>
	<table>
		<tr>
			<td class="title">图片文件<span class="ff0000"> *</span></td>
			<td colspan="3">
				<input type="file" name="file" id="file" />
				<div id="fileQueue"></div>
				<p>
					<a href="javascript:;" onClick="javascript:uploadifyUpload()">开始上传</a>&nbsp;
					<a href="javascript:;" onClick="javascript:uploadifyClearQueue()">取消所有上传</a>&nbsp;
				</p>
			</td>
			<td id=imageinfo></td>
		</tr>
	</table>
  </body>
</html>